import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { browserHistory } from 'react-router';
import * as loginActions from '../../actions/index';
import Bar from './IndexTabBar'
import Title from './IndexTitle'
//import demoPic from '../img/12-084943_744.jpg';


export default class Index extends Component {
    constructor(props) {
        super(props)
        this.state = {
              showToptips: false
        }
        this.handleOnClick = this.handleOnClick.bind(this)
    }
    handleOnClick() {
       this.props.loginActions.userLogin();
    }
    componentWillReceiveProps(nextProps) {
        if(nextProps.isAuth === true) {
            alert('you are good!');
        }
    }
    render() {
        return (
            <div>
                <Title storeId={this.props.params.storeId} />
                <div style={{ marginTop: '60px', marginBottom: '60px'}}>{this.props.children}</div>
                <Bar pathName={this.props.location.pathname} storeId={this.props.params.storeId} />
            </div>
        )
    }
}

function mapStateToProps(state) {
    return {
        isAuth: state.login.isAuth
    }
}
function mapDispatchToProps(dispatch) {
    return {
        loginActions: bindActionCreators(loginActions, dispatch)
    }
}

connect(mapStateToProps, mapDispatchToProps)(Index)
